<template>
  <div class="infoCard">
    <div class="tit">
      <img :src="img" alt="" srcset="" />
      {{ tit }}
    </div>
    <div class="item-box">
      <div v-for="item in arr" :key="item.name" class="item">
        <div>{{ item.name }}：</div>
        <div>{{ item.val }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTransferAccountsBatches } from "./api";
import img from "@/assets/img/shebaopaidan2x.png";
import moment from "moment";
export default {
  created() {
    this.onGetTransferAccountsBatches();
  },
  data() {
    return {
      img,
      tit: "青岛",
      type: "",
      arr: [
        { name: "用工单位", val: "" },
        { name: "申请人", val: "" },
        { name: "发放人数", val: "" },
        { name: "备注", val: "" },
        { name: "发放方式", val: "" },
        { name: "申请时间", val: "" },
        { name: "发放总金额", val: "" }
      ]
    };
  },
  methods: {
    async onGetTransferAccountsBatches() {
      try {
        // this.spinning = true;
        const id = this.$route.query.id ? this.$route.query.id : sessionStorage.getItem("paySalaryInfoId");
        const { data } = await getTransferAccountsBatches(id);
        this.tit = data.orderTitle || "";
        this.arr[0].val = data.companyName || "";
        this.arr[1].val = data.createUserName || "";
        this.arr[2].val = data.totalCount || "";
        this.arr[3].val = data.remark || "";
        this.type = data.type;
        if (data.type === 1) this.arr[4].val = "支付宝";
        if (data.type === 2) this.arr[4].val = "微工卡";
        if (data.type === 3) this.arr[4].val = "银行卡";
        this.arr[5].val = data.gmtCreate ? moment(data.gmtCreate).format("YYYY-MM-DD HH:mm") : "";
        this.arr[6].val = data.money || "";
        sessionStorage.setItem("paySalaryInfo", JSON.stringify(data));
        // setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        // setTimeout(() => (this.spinning = false), 500);
      }
    },
    getInfo() {
      return {
        batchId: this.$route.query.id,
        batchType: this.type
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.infoCard {
  width: 100%;
  height: 194px;
  background: #ffffff;
  border-radius: 4px;

  padding: 24px;

  .tit {
    font-size: 18px;
    font-weight: 500;
    color: #3c3d43;
    margin-bottom: 24px;
    img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
  }
  .item-box {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 25%;
      height: 32px;
      font-weight: 400;
      color: #55565d;
      margin-bottom: 24px;
      div:nth-child(1) {
        color: #a6a8b4;
      }
    }
  }
}
</style>
